import React from 'react';
import {SettingLayout} from 'components/SettingLayout';
import {CategoryMap, useTags} from 'hooks/useTags';
import styled from 'styled-components';
import Icon from 'components/Icon';
import {Link} from 'react-router-dom';
import {Button} from 'components/Button';
import {Center} from 'components/Center';
import {Tag} from '../../hooks/useTags';
import {TagInfoWrapper} from '../../components/TagInfoWrapper';
import {List} from 'components/List';

const TagList = styled(List)`
  > li {
    > a {
      > span:nth-child(2) {
        display: inline-block;
        border-radius: 16px;
        padding: 2px 16px;
        color: white;
        margin-right: auto;
        margin-left: 16px;
        font-size: 12px;
        &.cost {
          background: #FF865E;
        }
        &.income {
          background: #FEE440;
        }
      }
    }
  }
`;

function Tags() {
  const {tags} = useTags();
  return (
    <SettingLayout title="设置标签">
      <TagInfoWrapper>
        <TagList>
          {tags.map((tag: Tag) =>
            <li key={tag.id}>
              <Link to={'/tags/' + tag.id}>
                <span className="oneLine">{tag.name}</span>
                <span className={tag.category === '-' ? 'cost' : 'income'}>{CategoryMap[tag.category]}</span>
                <Icon name="right"/>
              </Link>
            </li>)}
        </TagList>
      </TagInfoWrapper>
      <Center>
        <Link to="/addTag">
          <Button>新增标签</Button>
        </Link>
      </Center>
    </SettingLayout>
  );
}

export default Tags;